<template>
  <div class="p-2">
    <!-- IOT服务器管理 - 服务器配置 -->
    <!-- 配置选择 -->
    <el-card shadow="hover" style="margin-bottom: 8px">
      <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="100px">
        <el-form-item label="选择服务器" prop="serverId">
          <el-select v-model="queryParams.serverId" placeholder="请选择服务器" style="width: 250px" @change="handleServerChange">
            <el-option
              v-for="server in serverOptions"
              :key="server.serverId"
              :label="server.serverName + ' (' + server.serverIp + ')'"
              :value="server.serverId"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="loadConfig">加载配置</el-button>
          <el-button type="success" icon="Refresh" @click="refreshConfig">刷新配置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 配置内容 -->
    <div v-if="selectedServer">
      <!-- 服务器基本信息 -->
      <el-card shadow="hover" style="margin-bottom: 8px">
        <template #header>
          <span style="font-size: 15px; font-weight: bold">服务器基本信息</span>
        </template>
        <el-descriptions :column="3" border>
          <el-descriptions-item label="服务器名称">{{ selectedServer.serverName }}</el-descriptions-item>
          <el-descriptions-item label="服务器IP">{{ selectedServer.serverIp }}</el-descriptions-item>
          <el-descriptions-item label="端口">{{ selectedServer.port }}</el-descriptions-item>
          <el-descriptions-item label="服务器类型">
            <el-tag :type="getServerTypeTag(selectedServer.serverType)">{{ selectedServer.serverType }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="运行状态">
            <el-tag :type="getStatusTag(selectedServer.status)">{{ getStatusText(selectedServer.status) }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="最后心跳">{{ selectedServer.lastHeartbeat }}</el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 配置标签页 -->
      <el-card shadow="hover">
        <el-tabs v-model="activeTab" type="border-card">
          <!-- 系统配置 -->
          <el-tab-pane label="系统配置" name="system">
            <el-form :model="systemConfig" :rules="systemRules" ref="systemFormRef" label-width="150px">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="最大连接数" prop="maxConnections">
                    <el-input-number v-model="systemConfig.maxConnections" :min="1" :max="10000" style="width: 100%" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="心跳间隔(秒)" prop="heartbeatInterval">
                    <el-input-number v-model="systemConfig.heartbeatInterval" :min="1" :max="300" style="width: 100%" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="连接超时(秒)" prop="connectionTimeout">
                    <el-input-number v-model="systemConfig.connectionTimeout" :min="1" :max="600" style="width: 100%" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="日志级别" prop="logLevel">
                    <el-select v-model="systemConfig.logLevel" style="width: 100%">
                      <el-option label="DEBUG" value="DEBUG" />
                      <el-option label="INFO" value="INFO" />
                      <el-option label="WARN" value="WARN" />
                      <el-option label="ERROR" value="ERROR" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="启用SSL" prop="enableSsl">
                    <el-switch v-model="systemConfig.enableSsl" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="启用认证" prop="enableAuth">
                    <el-switch v-model="systemConfig.enableAuth" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item>
                <el-button type="primary" @click="saveSystemConfig">保存系统配置</el-button>
                <el-button @click="resetSystemConfig">重置</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <!-- 网络配置 -->
          <el-tab-pane label="网络配置" name="network">
            <el-form :model="networkConfig" :rules="networkRules" ref="networkFormRef" label-width="150px">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="监听端口" prop="listenPort">
                    <el-input-number v-model="networkConfig.listenPort" :min="1" :max="65535" style="width: 100%" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="绑定IP" prop="bindIp">
                    <el-input v-model="networkConfig.bindIp" placeholder="0.0.0.0" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="缓冲区大小(KB)" prop="bufferSize">
                    <el-input-number v-model="networkConfig.bufferSize" :min="1" :max="1024" style="width: 100%" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="Keep-Alive" prop="keepAlive">
                    <el-switch v-model="networkConfig.keepAlive" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="允许的IP范围" prop="allowedIps">
                    <el-input v-model="networkConfig.allowedIps" type="textarea" :rows="3" placeholder="请输入允许访问的IP地址范围，多个用换行分隔" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item>
                <el-button type="primary" @click="saveNetworkConfig">保存网络配置</el-button>
                <el-button @click="resetNetworkConfig">重置</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <!-- 数据库配置 -->
          <el-tab-pane label="数据库配置" name="database">
            <el-form :model="databaseConfig" :rules="databaseRules" ref="databaseFormRef" label-width="150px">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="数据库类型" prop="dbType">
                    <el-select v-model="databaseConfig.dbType" style="width: 100%">
                      <el-option label="MySQL" value="mysql" />
                      <el-option label="PostgreSQL" value="postgresql" />
                      <el-option label="MongoDB" value="mongodb" />
                      <el-option label="Redis" value="redis" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="数据库主机" prop="dbHost">
                    <el-input v-model="databaseConfig.dbHost" placeholder="localhost" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="数据库端口" prop="dbPort">
                    <el-input-number v-model="databaseConfig.dbPort" :min="1" :max="65535" style="width: 100%" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="数据库名称" prop="dbName">
                    <el-input v-model="databaseConfig.dbName" placeholder="iot_platform" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="用户名" prop="dbUsername">
                    <el-input v-model="databaseConfig.dbUsername" placeholder="root" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="密码" prop="dbPassword">
                    <el-input v-model="databaseConfig.dbPassword" type="password" placeholder="请输入密码" show-password />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="连接池大小" prop="poolSize">
                    <el-input-number v-model="databaseConfig.poolSize" :min="1" :max="100" style="width: 100%" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="连接超时(秒)" prop="dbTimeout">
                    <el-input-number v-model="databaseConfig.dbTimeout" :min="1" :max="300" style="width: 100%" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item>
                <el-button type="primary" @click="saveDatabaseConfig">保存数据库配置</el-button>
                <el-button type="success" @click="testConnection">测试连接</el-button>
                <el-button @click="resetDatabaseConfig">重置</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <!-- 消息队列配置 -->
          <el-tab-pane label="消息队列配置" name="mq">
            <el-form :model="mqConfig" :rules="mqRules" ref="mqFormRef" label-width="150px">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="消息队列类型" prop="mqType">
                    <el-select v-model="mqConfig.mqType" style="width: 100%">
                      <el-option label="RabbitMQ" value="rabbitmq" />
                      <el-option label="Apache Kafka" value="kafka" />
                      <el-option label="Redis" value="redis" />
                      <el-option label="MQTT" value="mqtt" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="服务器地址" prop="mqHost">
                    <el-input v-model="mqConfig.mqHost" placeholder="localhost" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="端口" prop="mqPort">
                    <el-input-number v-model="mqConfig.mqPort" :min="1" :max="65535" style="width: 100%" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="虚拟主机" prop="virtualHost">
                    <el-input v-model="mqConfig.virtualHost" placeholder="/" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="用户名" prop="mqUsername">
                    <el-input v-model="mqConfig.mqUsername" placeholder="guest" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="密码" prop="mqPassword">
                    <el-input v-model="mqConfig.mqPassword" type="password" placeholder="请输入密码" show-password />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item>
                <el-button type="primary" @click="saveMqConfig">保存消息队列配置</el-button>
                <el-button type="success" @click="testMqConnection">测试连接</el-button>
                <el-button @click="resetMqConfig">重置</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>

    <!-- 未选择服务器提示 -->
    <el-card v-else shadow="hover">
      <el-empty description="请先选择要配置的服务器" />
    </el-card>
  </div>
</template>

<script setup name="ServerConfig" lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Refresh } from '@element-plus/icons-vue'

// 响应式数据
const activeTab = ref('system')
const selectedServer = ref(null)

// 查询参数
const queryParams = reactive({
  serverId: ''
})

// 服务器选项
const serverOptions = ref([
  {
    serverId: 'SRV001',
    serverName: 'IOT核心服务器01',
    serverIp: '192.168.1.100',
    port: 8080,
    serverType: 'IOT核心服务',
    status: '1',
    lastHeartbeat: '2024-01-15 14:30:25'
  },
  {
    serverId: 'SRV002',
    serverName: '数据处理服务器01',
    serverIp: '192.168.1.101',
    port: 8081,
    serverType: '数据处理服务',
    status: '1',
    lastHeartbeat: '2024-01-15 14:30:20'
  }
])

// 系统配置
const systemConfig = reactive({
  maxConnections: 1000,
  heartbeatInterval: 30,
  connectionTimeout: 60,
  logLevel: 'INFO',
  enableSsl: false,
  enableAuth: true
})

// 网络配置
const networkConfig = reactive({
  listenPort: 8080,
  bindIp: '0.0.0.0',
  bufferSize: 64,
  keepAlive: true,
  allowedIps: '192.168.1.0/24\n10.0.0.0/8'
})

// 数据库配置
const databaseConfig = reactive({
  dbType: 'mysql',
  dbHost: 'localhost',
  dbPort: 3306,
  dbName: 'iot_platform',
  dbUsername: 'root',
  dbPassword: '',
  poolSize: 10,
  dbTimeout: 30
})

// 消息队列配置
const mqConfig = reactive({
  mqType: 'rabbitmq',
  mqHost: 'localhost',
  mqPort: 5672,
  virtualHost: '/',
  mqUsername: 'guest',
  mqPassword: ''
})

// 表单验证规则
const systemRules = reactive({
  maxConnections: [{ required: true, message: '最大连接数不能为空', trigger: 'blur' }],
  heartbeatInterval: [{ required: true, message: '心跳间隔不能为空', trigger: 'blur' }],
  connectionTimeout: [{ required: true, message: '连接超时不能为空', trigger: 'blur' }],
  logLevel: [{ required: true, message: '日志级别不能为空', trigger: 'change' }]
})

const networkRules = reactive({
  listenPort: [{ required: true, message: '监听端口不能为空', trigger: 'blur' }],
  bindIp: [{ required: true, message: '绑定IP不能为空', trigger: 'blur' }],
  bufferSize: [{ required: true, message: '缓冲区大小不能为空', trigger: 'blur' }]
})

const databaseRules = reactive({
  dbType: [{ required: true, message: '数据库类型不能为空', trigger: 'change' }],
  dbHost: [{ required: true, message: '数据库主机不能为空', trigger: 'blur' }],
  dbPort: [{ required: true, message: '数据库端口不能为空', trigger: 'blur' }],
  dbName: [{ required: true, message: '数据库名称不能为空', trigger: 'blur' }],
  dbUsername: [{ required: true, message: '用户名不能为空', trigger: 'blur' }]
})

const mqRules = reactive({
  mqType: [{ required: true, message: '消息队列类型不能为空', trigger: 'change' }],
  mqHost: [{ required: true, message: '服务器地址不能为空', trigger: 'blur' }],
  mqPort: [{ required: true, message: '端口不能为空', trigger: 'blur' }]
})

// 获取服务器类型标签样式
const getServerTypeTag = (type: string) => {
  switch (type) {
    case 'IOT核心服务': return 'primary'
    case '数据处理服务': return 'success'
    case '消息队列服务': return 'warning'
    case '存储服务': return 'info'
    default: return 'primary'
  }
}

// 获取状态标签样式
const getStatusTag = (status: string) => {
  switch (status) {
    case '1': return 'success'
    case '0': return 'danger'
    case '2': return 'warning'
    default: return 'info'
  }
}

// 获取状态文本
const getStatusText = (status: string) => {
  switch (status) {
    case '1': return '运行中'
    case '0': return '已停止'
    case '2': return '异常'
    default: return '未知'
  }
}

// 服务器选择变化
const handleServerChange = () => {
  const server = serverOptions.value.find(item => item.serverId === queryParams.serverId)
  selectedServer.value = server || null
  if (server) {
    loadConfig()
  }
}

// 加载配置
const loadConfig = () => {
  if (!selectedServer.value) {
    ElMessage.warning('请先选择服务器')
    return
  }
  ElMessage.success('配置加载成功')
}

// 刷新配置
const refreshConfig = () => {
  if (!selectedServer.value) {
    ElMessage.warning('请先选择服务器')
    return
  }
  ElMessage.success('配置刷新成功')
}

// 保存系统配置
const saveSystemConfig = () => {
  ElMessage.success('系统配置保存成功')
}

// 重置系统配置
const resetSystemConfig = () => {
  systemConfig.maxConnections = 1000
  systemConfig.heartbeatInterval = 30
  systemConfig.connectionTimeout = 60
  systemConfig.logLevel = 'INFO'
  systemConfig.enableSsl = false
  systemConfig.enableAuth = true
}

// 保存网络配置
const saveNetworkConfig = () => {
  ElMessage.success('网络配置保存成功')
}

// 重置网络配置
const resetNetworkConfig = () => {
  networkConfig.listenPort = 8080
  networkConfig.bindIp = '0.0.0.0'
  networkConfig.bufferSize = 64
  networkConfig.keepAlive = true
  networkConfig.allowedIps = '192.168.1.0/24\n10.0.0.0/8'
}

// 保存数据库配置
const saveDatabaseConfig = () => {
  ElMessage.success('数据库配置保存成功')
}

// 测试数据库连接
const testConnection = () => {
  ElMessage.success('数据库连接测试成功')
}

// 重置数据库配置
const resetDatabaseConfig = () => {
  databaseConfig.dbType = 'mysql'
  databaseConfig.dbHost = 'localhost'
  databaseConfig.dbPort = 3306
  databaseConfig.dbName = 'iot_platform'
  databaseConfig.dbUsername = 'root'
  databaseConfig.dbPassword = ''
  databaseConfig.poolSize = 10
  databaseConfig.dbTimeout = 30
}

// 保存消息队列配置
const saveMqConfig = () => {
  ElMessage.success('消息队列配置保存成功')
}

// 测试消息队列连接
const testMqConnection = () => {
  ElMessage.success('消息队列连接测试成功')
}

// 重置消息队列配置
const resetMqConfig = () => {
  mqConfig.mqType = 'rabbitmq'
  mqConfig.mqHost = 'localhost'
  mqConfig.mqPort = 5672
  mqConfig.virtualHost = '/'
  mqConfig.mqUsername = 'guest'
  mqConfig.mqPassword = ''
}

// 组件挂载
onMounted(() => {
  // 初始化数据
})
</script>

<style scoped>
.mb8 {
  margin-bottom: 8px;
}
</style>